#mediaQueryDebug {
  height: 0.5rem;
  width: 100%;
  background: #f44336;
  position: fixed;
  z-index: 99999999;
  top: 0px;
  &::before {
    content: "red";
    padding-top: 0.75rem;
    padding-left: 0.5rem;
    display: block;
    z-index: 99999999;
    position: absolute;
  }
  display: none;
}

body {
  &.mediaQueryDebugLevel1 {
    #mediaQueryDebug {
      display: block;
    }
  }
  &.mediaQueryDebugLevel2 {
    #mediaQueryDebug {
      display: block;
    }
    .content-grid {
      border: 0.1rem dashed var(--main-color);
    }
  }
  &.mediaQueryDebugLevel3 {
    #mediaQueryDebug {
      display: block;
    }
    .content-grid > * {
      border: 0.1rem dashed var(--sub-color);
    }
    .content-grid {
      border: 0.1rem dashed var(--main-color);
    }
  }
}

//media queries based on tailwind breakpoints https://tailwindcss.com/docs/container
@import "media-queries-orange";
@import "media-queries-yellow";
@import "media-queries-green";
@import "media-queries-blue";
@import "media-queries-purple";
@import "media-queries-brown";
@import "media-queries-gray";

@media only screen and (max-width: 1875px) {
  .ad.ad-v {
    display: none;
  }
}

@media only screen and (max-width: 355px) {
  .ad.ad-h-s {
    display: none;
  }
}

// //1450px
// @media only screen and (max-width: 90.625rem) {
//
// }

// //1330px
// @media only screen and (max-width: 83.125rem) {
//   .ad.ad-v {
//     display: none;
//   }
//   #app {
//     grid-template-columns: auto;
//   }
//   // #customTextModal {
//   //   padding: 2rem;
//   //   .modal {
//   //     grid-template-columns: 1fr 1fr 2fr;
//   //     width: 100%;
//   //   }
//   // }
// }

// //1250px
// @media only screen and (max-width: 78.125rem) {
//   #customTextModal .modal {
//     textarea {
//       min-height: 426px;
//     }
//     .buttonsTop {
//       grid-template-columns: 1fr 1fr;
//     }
//   }
// }

// //1050px
// @media only screen and (max-width: 65.625rem) {
//   .profile .pbsWords,
//   .profile .pbsTime {
//     font-size: 0.8rem;
//   }
//   .profile .details.bioAndKey {
//     .bioAndKeyboard .value {
//       font-size: 0.75rem;
//     }
//   }
//   #result .morestats {
//     gap: 1rem;
//     grid-template-rows: 1fr 1fr;
//   }
// }

// //1000px
// @media only screen and (max-width: 62.5rem) {
//   .pageSettings .settingsGroup.quickNav .links {
//     grid-template-columns: 1fr 1fr 1fr;
//     grid-auto-flow: unset;
//     justify-items: center;
//   }
//   .pageAccount {
//     .group.chart .below {
//       grid-template-columns: 1fr;
//     }
//   }
// }

// //900px
// @media only screen and (max-width: 56.25rem) {
//   #customTextModal .modal {
//     grid-template-areas:
//       "topButtons topButtons topButtons"
//       "textArea textArea textArea"
//       "checkboxes checkboxes checkboxes"
//       "ok ok ok";
//   }
//   #testConfig {
//     .mode,
//     .time,
//     .wordCount,
//     .puncAndNum,
//     .customText,
//     .zen,
//     .quoteLength {
//       .textButton {
//         padding: 0.75rem 0.3rem 0.7rem 0.3rem;

//         &:first-child {
//           padding: 0.75rem 0.3rem 0.7rem 0.6rem;
//         }
//         &:last-child {
//           padding: 0.75rem 0.6rem 0.7rem 0.3rem;
//         }
//         &:only-child {
//           padding: 0.75rem 0.6rem 0.7rem 0.6rem;
//         }
//       }
//     }
//   }
//   .ad.ad-h {
//     display: none;
//   }
//   .ad.ad-h-s {
//     display: grid;
//   }
//   .profile .pbsWords,
//   .profile .pbsTime {
//     font-size: 1rem;
//   }
//   .profile {
//     grid-template-columns: 1fr;
//     grid-template-rows: auto auto auto;
//     grid-template-areas:
//       "info"
//       "leaderboards"
//       "pbsTime"
//       "pbsWords";
//     .details .bioAndKeyboard {
//       height: 100%; //dumb safari fix
//     }
//     .details.soc {
//       grid-template-columns: 1.25fr auto 1fr auto auto;
//       .typingStats {
//         grid-template-columns: 1fr;
//       }
//     }
//     .details.bioAndKey {
//       grid-template-columns: 1.25fr auto auto auto 1fr;
//       .typingStats {
//         grid-template-columns: 1fr;
//       }
//     }
//     .details.both {
//       grid-template-columns: 1.25fr auto 1.25fr auto;
//       grid-template-areas:
//         "avAndName sep2 bioAndKey bioAndKey"
//         "typingStats typingStats typingStats socials";
//       .sep1,
//       .sep3 {
//         display: none;
//       }
//       .typingStats {
//         grid-template-columns: 1fr 1fr 1fr;
//         width: 100%;
//       }
//       .socials {
//         justify-content: start;
//         .title {
//           display: block;
//         }
//         .value {
//           grid-auto-flow: column;
//         }
//       }
//     }
//     .details.none {
//       grid-template-columns: 1fr auto 1fr;
//       .typingStats {
//         grid-template-columns: 1fr;
//         // grid-template-areas:
//         //   "avAndName"
//         //   "typingStats";
//         // grid-template-columns: 1fr;
//         // .separator {
//         //   display: none;
//         // }
//       }
//     }
//     .leaderboardsPositions {
//       grid-template-areas: "title title" "t15 t60";
//     }
//   }
//   #bannerCenter .banner .container {
//     grid-template-columns: 1fr auto;
//     .image {
//       display: none;
//     }
//     .lefticon,
//     .righticon {
//       display: none;
//     }
//     .text {
//       margin-left: 1.5rem;
//       text-align: left;
//       justify-self: start;
//     }
//   }
//   .merchBanner {
//     img {
//       display: none;
//     }
//     .text {
//       padding: 0.25rem 0;
//     }
//   }
//   .pageSettings {
//     .section {
//       grid-template-columns: 1.5fr 1fr;
//     }
//     .section[data-config-name="autoSwitchThemeInputs"] {
//       grid-template-columns: 1fr 3fr;
//     }
//   }
//   .pageAccount {
//     .group.personalBestTables {
//       .tables {
//         grid-template-columns: 1fr;
//       }
//     }
//     .group.history {
//       table {
//         thead,
//         tbody {
//           td:nth-child(1),
//           td:nth-child(8),
//           td:nth-child(9) {
//             display: none;
//           }
//         }
//       }
//     }
//   }
//   .pageSettings .settingsGroup.quickNav .links {
//     grid-auto-flow: unset;
//     grid-template-columns: 1fr 1fr;
//     justify-items: center;
//   }
// }

// //800px
// @media only screen and (max-width: 50rem) {
//   header #logo .text {
//     font-size: 1.5rem;
//     line-height: 1.5rem;
//     margin-top: -0.1em;
//   }
//   nav {
//     gap: 0;
//   }
//   #testConfig {
//     .spacer {
//       display: none;
//     }
//     .row {
//       display: grid;
//       justify-items: center;
//       padding: 0.25rem 1rem;
//     }
//     .mode,
//     .time,
//     .wordCount,
//     .puncAndNum,
//     .customText,
//     .zen,
//     .quoteLength {
//       .textButton {
//         padding: 0.5rem 0.75rem 0.45rem 0.75rem;

//         &:first-child {
//           padding: 0.5rem 0.75rem 0.45rem 0.75rem;
//         }
//         &:last-child {
//           padding: 0.5rem 0.75rem 0.45rem 0.75rem;
//         }
//         &:only-child {
//           padding: 0.5rem 0.75rem 0.45rem 0.75rem;
//         }
//       }
//     }
//   }
//   #testModesNotice {
//     font-size: 0.75rem;
//   }

//   .page404 .content {
//     grid-auto-flow: row;
//     grid-template-columns: 300px;
//     gap: 1rem;
//   }

//   .pageAbout {
//     .section {
//       .contributors,
//       .supporters {
//         grid-template-columns: 1fr 1fr 1fr;
//       }
//       .contactButtons {
//         grid-template-columns: 1fr 1fr;
//       }
//     }
//   }

//   .pageSettings .section[data-config-name="customBackgroundFilter"] {
//     .groups {
//       grid-template-columns: 1fr;
//     }
//     .saveContainer {
//       grid-column: -1/-2;
//     }
//   }

//   #customTextModal .modal {
//     .buttonsTop {
//       grid-template-columns: 1fr;
//     }
//   }
// }

// //750px
// @media only screen and (max-width: 46.875rem) {
//   #quoteSearchModal .modal #quoteSearchControlsWrapper {
//     grid-template-columns: 1fr;
//   }
//   .pageAbout {
//     .triplegroup {
//       grid-template-columns: 1fr;
//       .group {
//         display: grid;
//         grid-template-columns: 1fr 1fr;
//         align-items: center;
//         gap: 0rem 1rem;
//         .label {
//           grid-column: span 2;
//         }
//       }
//     }
//   }
// }

// //700px
// @media only screen and (max-width: 43.75rem) {
//   #wordFilterModal .modal {
//     .divider {
//       width: 100%;
//       height: 0.25rem;
//     }
//     grid-template-areas: "top" "right" "divider" "left" "bottom";
//     grid-template-columns: 1fr;
//   }
//   .pageAccount .presetFilterButtons .buttons {
//     grid-template-columns: 1fr;
//   }
//   .pageAccount .group.filterButtons {
//     grid-template-columns: 1fr;
//   }

//   .pageAccount {
//     .triplegroup {
//       grid-template-columns: 1fr 1fr;
//       .emptygroup {
//         display: none;
//       }
//     }
//     .group.topFilters .buttonsAndTitle .buttons {
//       display: grid;
//       justify-content: unset;
//     }
//     .group.history {
//       table {
//         thead,
//         tbody {
//           td:nth-child(6) {
//             display: none;
//           }
//         }
//       }
//     }
//     .group.estimatedWordsTyped {
//       flex-direction: column;
//       .title {
//         margin-right: unset;
//       }
//     }
//   }
//   .badge::after,
//   .badge::before {
//     display: none;
//   }
// }

// //650px
// @media only screen and (max-width: 40.625rem) {
//   header {
//     nav {
//       .textButton.view-account {
//         .text {
//           display: none;
//         }
//         .levelAndBar {
//           display: none;
//         }
//       }
//     }
//   }
//   .profile {
//     grid-template-columns: 1fr;
//     grid-template-rows: auto auto auto;
//     grid-template-areas:
//       "info"
//       "leaderboards"
//       "pbsTime"
//       "pbsWords";
//     .details.none {
//       grid-template-areas:
//         "avAndName"
//         "typingStats";
//       grid-template-columns: 1fr;
//       .separator {
//         display: none;
//       }
//       .typingStats {
//         grid-template-columns: 1fr 1fr 1fr;
//       }
//     }
//     .details.bioAndKey {
//       grid-template-areas:
//         "avAndName bioAndKey"
//         "typingStats typingStats";
//       grid-template-columns: 1fr 1fr;
//       .separator {
//         display: none;
//       }
//       .typingStats {
//         grid-template-columns: 1fr 1fr 1fr;
//       }
//     }
//     .details.soc {
//       grid-template-areas:
//         "avAndName"
//         "typingStats"
//         "socials";
//       grid-template-columns: 1fr;
//       .separator {
//         display: none;
//       }
//       .typingStats {
//         grid-template-columns: 1fr 1fr 1fr;
//       }
//       .socials {
//         justify-content: start;
//         .title {
//           display: block;
//         }
//         .value {
//           grid-auto-flow: column;
//         }
//       }
//     }
//     .details.both {
//       grid-template-areas:
//         "avAndName bioAndKey"
//         "typingStats typingStats"
//         "socials socials";
//       grid-template-columns: 1fr 1fr;
//       .separator {
//         display: none;
//       }
//       .typingStats {
//         grid-template-columns: 1fr 1fr 1fr;
//       }
//       .socials {
//         height: 100%; //dumb safari fix
//         justify-content: start;
//         .title {
//           display: block;
//         }
//         .value {
//           grid-auto-flow: column;
//         }
//       }
//     }
//   }
//   #quoteRateModal {
//     .ratingStats {
//       grid-template-columns: 1fr 1fr !important;
//     }
//     .quote {
//       grid-template-areas:
//         "text text text"
//         "source source source"
//         "id length length" !important;
//     }
//   }
//   .pageSettings .section {
//     grid-template-columns: 1fr;
//     grid-template-areas:
//       "title"
//       "text"
//       "buttons";

//     & > .text {
//       margin-bottom: 0.25em;
//     }

//     & .customThemeEdit {
//       .customThemeInputs {
//         grid-template-columns: 1fr 1.5fr;
//       }
//       .spacer {
//         grid-column: span 2;
//       }
//       .customThemeButtons {
//         grid-template-columns: 1fr;
//       }
//     }
//   }

//   #result {
//     .buttons {
//       grid-template-rows: 1fr 1fr 1fr;
//       #nextTestButton {
//         grid-column: 1/5;
//         width: 100%;
//         text-align: center;
//       }
//     }
//   }
// }

// //600px
// @media only screen and (max-width: 37.5rem) {
//   .pageAbout .section .supporters,
//   .pageAbout .section .contributors {
//     grid-template-columns: 1fr 1fr;
//   }
//   header #logo .bottom {
//     margin-top: 0;
//   }
//   .pageLogin {
//     display: grid;
//     gap: 5rem;
//     grid-auto-flow: unset;
//   }
//   main {
//     #result {
//       grid-template-areas:
//         "stats stats"
//         "chart chart"
//         "morestats morestats";
//       .stats {
//         grid-template-areas: "wpm acc";
//         gap: 2rem;
//       }
//       .stats.morestats {
//         grid-template-rows: 1fr 1fr 1fr;
//         gap: 1rem;
//       }
//     }
//   }

//   .pageAccount {
//     .group.history {
//       table {
//         thead,
//         tbody {
//           td:nth-child(7),
//           td:nth-child(5) {
//             display: none;
//           }
//         }
//       }
//     }
//   }
// }

// //550px
// @media only screen and (max-width: 34.375rem) {
//   header {
//     #logo {
//       grid-template-columns: auto;
//       .text {
//         display: none;
//       }
//     }
//     // nav {
//     //   .textButton.view-account {
//     //     .text {
//     //       display: none;
//     //     }
//     //     .levelAndBar {
//     //       display: none;
//     //     }
//     //   }
//     // }
//   }

//   .modalWrapper {
//     padding: 1rem;
//     .modal {
//       padding: 1rem;
//     }
//   }

//   #commandLineWrapper {
//     padding: 5rem 1rem;
//   }
//   .pageSettings .section.themes .customTheme.button.active,
//   .pageSettings .section.themes .theme.button.active {
//     transform: scale(1.025);
//   }
//   .pageSettings .section.themes .buttons div.theme:hover {
//     transform: scale(1.025);
//   }
//   .profile .pbsWords,
//   .profile .pbsTime {
//     font-size: 0.9rem;
//   }
//   .profile {
//     .pbsWords,
//     .pbsTime {
//       grid-template-columns: 1fr 1fr;
//     }
//     .details.none .typingStats {
//       grid-template-columns: 1fr;
//     }
//     .details.bioAndKey {
//       grid-template-areas:
//         "avAndName"
//         "bioAndKey"
//         "typingStats";
//       grid-template-columns: 1fr;
//       .typingStats {
//         grid-template-columns: 1fr;
//       }
//     }
//     .details.both {
//       grid-template-areas:
//         "avAndName"
//         "bioAndKey"
//         "typingStats"
//         "socials";
//       grid-template-columns: 1fr;
//       .typingStats {
//         grid-template-columns: 1fr;
//       }
//     }
//     .leaderboardsPositions {
//       grid-template-areas: "title" "t15" "t60";
//     }
//   }
//   #keymap {
//     .row {
//       height: 1.25rem;
//     }
//     .keymapKey {
//       width: 1.25rem;
//       height: 1.25rem;
//       border-radius: 0.3rem;
//       font-size: 0.6rem;
//     }

//     &.split_matrix .keymapSplitSpacer {
//       width: 1.25rem;
//       height: 1.25rem;
//       border-radius: 0.3rem;
//       font-size: 0.6rem;
//     }
//   }

//   .pageAbout .section .supporters,
//   .pageAbout .section .contributors {
//     grid-template-columns: 1fr;
//   }

//   .pageSettings {
//     .section[data-config-name="customBackgroundFilter"] .groups .group {
//       grid-template-columns: auto 1fr;
//       .title {
//         grid-column: 1/3;
//       }
//     }
//   }

//   .pageAbout .section {
//     .contactButtons,
//     .supportButtons {
//       grid-template-columns: 1fr;
//     }
//   }

//   .pageAccount {
//     .triplegroup {
//       grid-template-columns: 1fr;
//     }
//     .group.history {
//       table {
//         thead,
//         tbody {
//           td:nth-child(3) {
//             display: none;
//           }
//         }
//       }
//     }
//   }

//   header {
//     nav {
//       font-size: 1rem;
//     }
//   }
//   footer {
//     .leftright {
//       .left {
//         display: grid;
//         grid-template-rows: 1fr 1fr 1fr;
//         grid-template-columns: auto auto auto;
//         grid-auto-flow: row;
//       }
//       .right {
//         display: grid;
//         grid-template-rows: 1fr 1fr 1fr;
//       }
//     }
//   }
//   #contentWrapper {
//     header {
//       // grid-template-columns: 1fr auto;
//       .desktopConfig {
//         display: none;
//       }
//       .mobileConfig {
//         display: block;
//       }
//     }
//     gap: 1rem;
//     padding: 1rem;
//   }
//   main {
//     #result {
//       .stats {
//         grid-template-areas:
//           "wpm"
//           "acc";
//         gap: 1rem;
//       }
//     }
//   }
//   #result {
//     .buttons {
//       grid-template-rows: 1fr 1fr 1fr 1fr;
//       #nextTestButton {
//         grid-column: 1/3;
//         width: 100%;
//         text-align: center;
//       }
//     }
//   }
// }

// //450px
// @media only screen and (max-width: 28.125rem) {
//   #testConfig {
//     display: none;
//   }

//   #mobileTestConfigButton {
//     display: block;
//   }
//   #alertsPopupWrapper {
//     #alertsPopup {
//       border-radius: 0;
//       width: 100%;
//       .mobileClose {
//         display: block;
//       }
//     }
//   }
// }

// //400px
// @media only screen and (max-width: 25rem) {
//   header .config {
//     grid-gap: 0.25rem;
//     .group .buttons {
//       font-size: 0.65rem;
//       line-height: 0.65rem;
//     }
//   }

//   header nav {
//     font-size: 0.75rem;
//   }

//   footer {
//     font-size: 0.65rem;
//     .leftright {
//       grid-template-columns: 1fr 1fr;
//       .left {
//         grid-template-rows: 1fr 1fr 1fr 1fr;
//         grid-template-columns: 1fr 1fr;
//         grid-auto-flow: row;
//       }
//       .right {
//         grid-template-rows: 1fr 1fr 1fr 1fr;
//       }
//     }
//   }
//   .page404 .content {
//     grid-template-columns: 1fr;
//   }
// }

// //350px
// @media only screen and (max-width: 21.875rem) {
//   .pageSettings .settingsGroup.quickNav .links {
//     grid-template-columns: 1fr;
//   }
//   .ad.ad-h-s {
//     display: none;
//   }
//   #keymap {
//     display: none !important;
//   }
//   .pageLogin .side {
//     input[type="email"],
//     input[type="password"],
//     input[type="text"] {
//       width: 90vw;
//     }
//   }
//   .page404 {
//     .content {
//       width: 100%;
//       .image {
//         width: 100%;
//       }
//       .big {
//         font-size: 7rem;
//         line-height: 7rem;
//       }
//     }
//   }
// }

@media (hover: none) and (pointer: coarse) {
  #commandLineMobileButton {
    display: block !important;
  }
}

@media (prefers-reduced-motion) {
  body:not(.ignore-reduced-motion)
    *:not(.fa-spin, #backgroundLoader, .preloader) {
    animation: none !important;
    transition: none !important;

    &::after,
    &::before {
      animation: none !important;
      transition: none !important;
    }
  }

  html {
    scroll-behavior: auto !important;
  }
}
